<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="用户搜索" prop="leader_info">
          <el-input v-model="state.params.leader_info" style="width: 200px" placeholder="请输入账户昵称、手机号" />
        </el-form-item>
        <el-form-item label="时间周期" prop="timeArray">
          <el-date-picker
            v-model="state.params._dateRange"
            :shortcuts="dateShortcut"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>

    <div class="base-block">
      <KTable v-bind="tableState" :default-sort="state.defaultSort" v-on="tableEvent">
        <template #nick_name="s">
          <p v-if="s.row.nick_name" class="user-box">{{ s.row.nick_name }} <i>管理员</i></p>
          <p v-else>-</p>
        </template>
        <template #monitor_num="s">
          <el-link type="primary" @click="onClickMonitorNum(s.row.team_id)">{{ s.row.monitor_num || 0 }}</el-link>
        </template>
      </KTable>
    </div>
  </PageListContainer>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useTableList } from './hooks/use-table';

import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
defineOptions({ name: 'DyjTeam' });
const { state, tableState, tableEvent, ...methods } = useTableList({});

const router = useRouter();
const onClickMonitorNum = (id: string) => {
  router.push({ name: 'DyjTeamDouyinList', query: { teamId: id } });
};
</script>
